<template>
  <div style="background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">患者管理</span>
  </div>
  <!-- 患者数据搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="患者姓名">
        <el-input placeholder="请输入" style="width:220px;" v-model="searchForm.name"
                  @keydown.enter="selectDict"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input placeholder="请输入" style="width:220px;" v-model="searchForm.certId"
                  @keydown.enter="selectDict"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input placeholder="请输入" style="width:220px;" v-model="searchForm.address"
                  @keydown.enter="selectDict"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selectDict">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 患者数据展示 -->
  <el-card style="margin:20px;">
    <el-table :data="PatinetArr" border stripe style="width: 100%">
      <el-table-column prop="name" label="患者姓名" width="180"></el-table-column>
      <el-table-column prop="certId" label="身份证号" width="180"></el-table-column>
      <el-table-column prop="sex" label="性别" width="180">
        <template #default="scope">
          <span>{{ scope.row.sex === 1 ? '女' : '男' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="180"></el-table-column>
      <el-table-column prop="address" label="地址" width="180"></el-table-column>
      <el-table-column prop="drugs" label="住院次数" width="180"></el-table-column>
      <!-- 申请单详情按钮 -->
      <el-table-column label="申请单详情" width="180">
        <template #default="scope">
          <el-button type="primary" @click="ShowDialogView(1, scope.row.appointmentVo)">申请单详情</el-button>
        </template>
      </el-table-column>
      <!-- 住院信息按钮 -->
      <el-table-column label="住院信息" width="180">
        <template #default="scope">
          <el-button type="primary" @click="ShowDialogView(2, scope.row.hospitalizationVo)">住院单详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <!-- 申请单详情对话框 -->
  <el-dialog title="申请单详情" v-model="ApplicationViewShow" width="50%">
    <el-table :data="ApplicationDetails" border stripe style="width: 100%">
      <el-table-column prop="patientName" label="患者姓名" width="180"></el-table-column>
      <el-table-column prop="doctorName" label="医生姓名" width="180"></el-table-column>
      <el-table-column prop="time" label="时间" width="180"></el-table-column>
      <el-table-column prop="expenses" label="费用" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="180">
        <template #default="scope">
          <el-tag v-if="scope.row.status == 1" type="success">待完成</el-tag>
          <el-tag v-else type="danger">已完成</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <!-- 住院信息对话框 -->
  <el-dialog title="住院信息" v-model="HospitalizationViewShow" width="50%">
    <el-table :data="hospitalizationData" border stripe style="width: 100%">
      <el-table-column prop="floor" label="楼层" width="180"></el-table-column>
      <el-table-column prop="bed" label="床位" width="180"></el-table-column>
      <el-table-column prop="door" label="门号" width="180"></el-table-column>
      <el-table-column prop="medicalName" label="医疗名称" width="180"></el-table-column>
      <el-table-column prop="intime" label="入院时间" width="180"></el-table-column>
      <el-table-column prop="outtime" label="出院时间" width="180"></el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "@/axios";
import { ElMessage } from "element-plus";

const searchForm = ref({
  name: '',
  certId: '',
  address: '',
});

const PatinetArr = ref([]);
const ApplicationViewShow = ref(false);
const HospitalizationViewShow = ref(false);
const ApplicationDetails = ref([]);
const hospitalizationData = ref([]);

const resetSearch = () => {
  searchForm.value = {
    name: "",
    certId: "",
    address: "",
  };
};

const selectDict = () => {
  axios.post("/patient/list", searchForm.value).then((response) => {
    if (response.data.code === 200) {
      ElMessage.success('查询成功');
      PatinetArr.value = response.data.data;
    } else {
      ElMessage.error(response.data.message);
    }
  });
};

const ShowDialogView = (type, data) => {
  if (type === 1) {
    // 申请单详情
    ApplicationViewShow.value = true;
    ApplicationDetails.value = [data];
  } else if (type === 2) {
    // 住院信息
    if (data) {
      HospitalizationViewShow.value = true;
      hospitalizationData.value = [data];
    } else {
      ElMessage.error('该患者没有住院信息');
    }
  }
};

onMounted(() => {
  selectDict();
});
</script>

<style scoped>
</style>
